<template>
  <el-dialog :visible.sync="dialog" width="480px" :close-on-click-modal="false" :before-close="reset">
    <span slot="title" class="dialog-title">{{ title }}</span>
    <div class="dialog_info">
      <el-form ref="form" :inline="true" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="产品图" prop="figure">
          <el-upload class="avatar-uploader" :headers="headers" :action="action" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <el-image v-if="form.figure" :src="url+form.figure" class="avatar" fit="contain" />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="产品名" prop="name">
          <el-input v-model="form.name" placeholder="用户名" clearable />
        </el-form-item>
        <el-form-item label="押金(元)" prop="money">
          <el-input-number v-model="form.money" :precision="2" :step="0.01" :min="0" />
        </el-form-item>
        <el-form-item label="总租金(元)" prop="rent">
          <el-input-number v-model="form.rent" :precision="2" :step="0.01" :min="0" />
        </el-form-item>
        <el-form-item label="租用天数" prop="day">
          <el-input-number v-model="form.day" :precision="0" :step="1" :min="0" />
        </el-form-item>
        <el-form-item label="地址" prop="adress">
          <el-input v-model="form.adress" placeholder="地址" clearable />
        </el-form-item>
        <el-form-item label="详情" prop="content">
          <el-input v-model="form.content" placeholder="详情" clearable />
        </el-form-item>
        <el-form-item label="赔偿标准" prop="compensation">
          <el-input v-model="form.compensation" placeholder="赔偿标准" clearable />
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="reset">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { add, update } from '@/api/goods'
import { getToken } from '@/utils/auth'
export default {
  name: 'UserDialog',
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      action: process.env.VUE_APP_BASE_API + '/files/upload',
      url: process.env.VUE_APP_BASE_API,
      headers: {
        token: getToken()
      },
      form: {
        content: '',
        name: '',
        money: '',
        rent: '',
        adress: '',
        figure: '',
        compensation: '',
        day: null,
        id: ''
      },
      deptList: [],
      roleList: [],
      title: '添加',
      rules: {
        name: [{ required: true, message: '请输入产品名', trigger: 'blur' }],
        money: [{ required: true, message: '请输入金额(元)', trigger: 'blur' }],
        day: [{ required: true, message: '请输入租用天数', trigger: 'blur' }]
      }
    }
  },
  watch: {
    dialog(dialog) {
      if (dialog) {
        if (Object.keys(this.row).length === 0) {
          this.$data.form = this.$options.data().form
          this.title = '添加'
        } else {
          for (const key in this.form) {
            this.form[key] = this.row[key]
            this.title = '修改'
          }
        }
        setTimeout(() => {
          this.$refs.form.clearValidate()
        }, 10)
      }
    }
  },
  methods: {
    reset() {
      this.$emit('reset', 'dialog')
    },
    handleAvatarSuccess(res, file) {
      this.form.figure = res.data
    },
    beforeAvatarUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt5M
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.id) {
            update(this.form).then(res => {
              if (res.code * 1 === 200) {
                this.$message({
                  message: `${this.title}成功`,
                  type: 'success',
                  showClose: true
                })
                this.$emit('submit', 'dialog')
              }
            })
            return
          }
          add(this.form).then(res => {
            if (res.code * 1 === 200) {
              this.$message({
                message: `${this.title}成功`,
                type: 'success',
                showClose: true
              })
              this.$emit('submit', 'dialog')
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog_info {
  .el-input,
  .el-select {
    width: 280px;
  }
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 237px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 237px;
  height: 178px;
  display: block;
}
</style>

